<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@page import="helpers.LanguageHelper"%>
<%@page import="helpers.UrlHelper"%>
<%@page import="java.util.TreeMap"%>
<%@page import="entities.User"%>
<%
User user = (User) request.getAttribute("user");
TreeMap check = (TreeMap) request.getAttribute("check");
String success = (String) request.getAttribute("success");
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
ImagesService imagesService = ImagesServiceFactory.getImagesService();
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/user/layouts/header.jsp" />
<script type="text/javascript">
jQuery(document).ready(function () {
	jQuery("#profileTab li:eq(1)").addClass("active");
});
</script>
			<ul class="nav nav-tabs">
                <li>
                    <a href="/profile"><i class="icon-tasks"></i> Profile</a>
                </li>
                <li class="active">
                    <a href="/profile/change-avatar"><i class="icon-user"></i> Change Avatar</a>
                </li>
                <li>
                    <a href="/profile/article/list"><i class="icon-briefcase"></i> My Articles</a>
                </li>
                <li>
                    <a href="/profile/article/submit"><i class="icon-envelope"></i> Submit Article</a>
                </li>
            </ul>
            <div class="tab-content">
            	<div id="change-avatar-tab" class="tab-pane row-fluid active fade in">
                    	<% if (success != null) { %>
			            <div class="alert alert-success"><%=success %></div>
			            <% } %>
                    
                        <form method="post" class="form-horizontal" action="<%= blobstoreService.createUploadUrl("/profile/change-avatar") %>" enctype="multipart/form-data">                 	
                            <div class="row-fluid">
                            	<br />
                            	<div class="span11" style="text-align: center; margin-bottom: 20px;">
                                	<% 
										if (user.getAvatar() != null && !user.getAvatar().isEmpty())  {
											 BlobKey blobKey = new BlobKey(user.getAvatar());
									%>
									<img alt="" src="<%=imagesService.getServingUrl(blobKey) %>=s120-c"><br />
									<% } else { %>							
									<img class="img-full-width" src="/user/images/icon-author.jpg" />
									<% } %>
                                </div>
                                <div class="span11" style="text-align: center;">
                                	<div class="control-group">
                                		<input type="file" id="avatar_file" name="avatar" value="Upload" />
                                    </div>
                                	<button class="btn btn-primary" type="submit">Change my avatar</button>
                                </div>
                            </div>
                        </form>
                </div>
            </div>
                    
<jsp:include page="/user/layouts/footer.jsp" />